Automating Frames in Playwright

Tutorial 12​​ –​​ Handle frames​​ in Playwright​​ 

What you will Learn​​ in this​​ blog:

How to handle frames​​ in PW

Code snippet

Handle frames in PW

A frame is simply an html​​ page​​ embedded​​ within​​ another​​ page.​​ 

Launch​​ https://paytm.com/​​ & click​​ ‘Sign In’.

A separate window opens up​​ and this is frame.​​ Now how do we​​ know that it is a frame?​​ 

When​​ we​​ ‘right click’​​ this window, we can​​ see ‘View frame source’

We​​ will not​​ see​​ ‘View frame source’ option if​​ we​​ click anywhere outside this window

So this was a basic understanding of frame.​​ 

Let us now launch​​ 

https://the-internet.herokuapp.com/iframe​​ 

Let us see how to automate a test that will write inside the text area of above frame.

Inspect the text area of this frame.​​ 

Notice below that it is represented by tag ‘iframe’ having the ‘id’ mentioned below

In playwright, we have ‘frameLocator’ method as shown below. Using this method, we can identify the above frame that we have inspected​​ 

So we can write as shown below. We are using the css selector to identify the frame

Next,​​ this frame is inside a parent html page and we can locate this using the ‘html’ locator

Next, once we have located the frame, we have to click it before we start typing into it​​ 

Now, we can finally type something into the text area

So the entire code looks like below

Save and run the script.

Notice below that the desired text gets typed in the frame’s text area

This is how we can work with frames in playwright.​​ 

Note: In playwright, we do NOT have to switch to a frame (like in selenium).​​ 

Refer​​ https://playwright.dev/docs/api/class-frame​​ to learn more about frames

Code snippet

import​​ {test,expect}​​ from​​ '@playwright/test'

test("frames",​​ async​​ ({​​ page​​ })​​ =>​​ {

   ​​ await​​ page.goto('https://the-internet.herokuapp.com/iframe')

   ​​ const​​ frame1​​ =​​ page.frameLocator('#mce_0_ifr').locator('html')

   ​​ await​​ frame1.click()    

   ​​ await​​ frame1.type('Welcome to playwright')

   ​​ await​​ page.pause()    

})

Thank you for reading!